import React from 'react';
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0';

import Input, { InputProps } from './index';
import Icon from '../Icon';

const style: React.CSSProperties = {
  width: '200px',
};

// 声明故事的所属模块和名称
export default {
  title: 'Components/Input',
  component: Input,
} as Meta;

// 使用的模板
const Template: Story<InputProps> = args => <Input {...args}></Input>;

// 分别定义不同得故事类型
export const Default = Template.bind({
  style,
});
Default.args = {
  onChange: event => console.log(event),
};
Default.storyName = '默认的 Input';

const HasIconTemplate: Story<InputProps> = args => {
  const [value, setValue] = React.useState();
  return (
    <div>
      {/* 
        prefixIcon 传入 icon 组件
       */}
      <Input
        {...args}
        placeholder='来骑自行车啊...'
        prefixIcon={<Icon icon='biking' />}
        suffixIcon='arrow-left'
      />
      <div style={{ height: '20px' }}></div>
      <Input
        {...args}
        prefixIcon='arrow-left'
        suffixIcon={<Icon icon='biking' />}
      />
      <div style={{ height: '20px' }}></div>
      <Input
        {...args}
        prefixIcon='arrow-left'
        suffixIcon={<Icon icon='biking' />}
      />
      <div style={{ height: '20px' }}></div>
      <Input
        {...args}
        size='large'
        prefixIcon='arrow-left'
        suffixIcon={<Icon icon='biking' />}
      />
      <div style={{ height: '20px' }}></div>
      <Input
        {...args}
        size='large'
        append='arrow-left'
        prepend={<Icon icon='biking' />}
      />
      <div style={{ height: '20px' }}></div>
      <Input append='arrow-left' />
      <div style={{ height: '20px' }}></div>
      <Input
        append='arrow-left'
        suffixIcon={<Icon icon='biking' />}
        defaultValue={2222}
        value={value}
        onChange={e => setValue(e.target.value)}
      />
    </div>
  );
};
// 分别定义不同得故事类型
export const HasIcon = HasIconTemplate.bind({
  style,
});
HasIcon.args = {
  prefixIcon: 'arrow-circle-right',
};
HasIcon.storyName = '带有 Icon 的 Input';
